<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script src="../../../jquery.gamequery.js"></script>
        <script>
            $(function(){
                var multiAnimation = new $.gameQuery.Animation({imageURL: "m.png", 
                                                                type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_MULTI, 
                                                                numberOfFrame: 3, 
                                                                delta: 10, 
                                                                distance: 10,
                                                                rate: 300});
                var animations = [];
                animations[0] = new $.gameQuery.Animation({imageURL: "s1.png", 
                                                                type: $.gameQuery.ANIMATION_HORIZONTAL, 
                                                                numberOfFrame: 3, 
                                                                delta: 10,
                                                                rate: 300});
                animations[1] = new $.gameQuery.Animation({imageURL: "s2.png", 
                                                                type: $.gameQuery.ANIMATION_HORIZONTAL, 
                                                                numberOfFrame: 3, 
                                                                delta: 10,
                                                                rate: 300});
                animations[2] = new $.gameQuery.Animation({imageURL: "s3.png", 
                                                                type: $.gameQuery.ANIMATION_HORIZONTAL, 
                                                                numberOfFrame: 3, 
                                                                delta: 10,
                                                                rate: 300});
                
                var tileDef = [[1,2,3],[2,3,1],[3,1,2]];
                var tileFun = function(i,j){return 1+(i+j)%3;};
                $("#playground").playground({height: 64, width: 350});
                
                $.playground()
                    .addTilemap("multiArray",    tileDef, multiAnimation, {width: 10, height: 10, sizex: 3, sizey: 3, posx: 0}).end()
                    .addTilemap("multiFunction", tileFun, multiAnimation, {width: 10, height: 10, sizex: 3, sizey: 3, posx: 40}).end()
                    .addTilemap("arrayArray",    tileDef, animations,     {width: 10, height: 10, sizex: 3, sizey: 3, posx: 80}).end()
                    .addTilemap("arrayFunction", tileFun, animations,     {width: 10, height: 10, sizex: 3, sizey: 3, posx: 120});
                
                $.playground().startGame();
            });
        </script>
    </head>
    <body>
        <h2>All four tiles should be the same:</h2>
        <div id="playground" style="width: 350px; height: 50px; background: white"></div>
    </body>
</html>